<template>
  <div class="detailShopInfo">
    <div class="shopTop flex a-c">
      <img :src="shop.logo" alt="" />
      <span class="title">{{ shop.name }} </span>
    </div>
    <div class="shopMiddle">
      <div class="shopMiddleItem shopMiddleLeft">
        <div class="infoSells flex a-c f-a">
          <div class="flex f-a flexel">
            <div class="flex f-cl">
              <div class="sellsCount">
                {{ sellCountFilter }}
              </div>
              <div class="sellText">总销量</div>
            </div>
            <div class="infoGoods">
              <div class="goodsCount">
                {{ shop.goodsCount }}
              </div>
              <div class="goodsText">全部宝贝</div>
            </div>
          </div>
          <div class="su"></div>
          <div class="shopMiddleItem shopMiddleRight">
            <table>
              <tr v-for="(n, index) in shop.score" :key="index">
                <td>{{ n.name }}</td>
                <td class="score" :class="{ scoreBetter: n.isBetter }">
                  {{ n.score }}
                </td>
                <td class="better" :class="{ scoreMore: n.isBetter }">
                  <span>{{ n.isBetter ? "高" : "低" }} </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="shopBottom">
          <span class="enterShop">进店逛逛</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailShopInfo",
  props: {
    shop:{
       type: Object, 
       default: {} 
    },
  },
  computed: {
    sellCountFilter() {
      if (this.shop.sells < 10000) {
        return this.shop.sells;
      } else {
        return (this.shop.sells / 10000).toFixed(1) + "万";
      }
    },
  },
};
</script>

<style scoped>
.detailShopInfo {
  padding: 25px 8px;
  border-bottom: 5px solid #f2f5f8;
}
.shopTop {
  line-height: 45px;
}
.shopTop img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.shopTop .title {
  margin-left: 10px;
  vertical-align: center;
}
.shopMiddle {
  margin-top: 15px;
}
.shopMiddleItem {
  flex: 1;
}
.shopMiddleLeft {
  color: #333;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.sellsCount,
.goodsCount {
  font-size: 18px;
}
.sellsText,
.goodsText {
  margin-top: 10px;
  font-size: 12px;
}
.shopMiddleRight {
  font-size: 13px;
  color: #333;
}
.shopMiddleRight table {
  width: 120px;
  margin-left: 30px;
}
.shopMiddleRight table td {
  padding: 5px 0;
}
.shopMiddleRight .score {
  color: #5ea732;
}
.shopMiddleRight .scoreBetter {
  color: #f13e3a;
}
.shopMiddleRight .better span {
  background-color: #5ea732;
  color: #fff;
  text-align: center;
}
.shopMiddleRight .betterMore span {
  background-color: #f13e3a;
}
.shopBottom {
  margin: 20px 0;
}
.enterShop {
  background-color: rgb(219, 218, 218);
  padding: 10px 30px;
  border-radius: 10px;
}
.su {
  width: 2px;
  height: 60px;
  background-color: rgb(216, 216, 216);
}
</style>